<template>
    <div class="BankList-Main">
        <van-nav-bar left-arrow @click-left="onClickLeft">
            <template #left>
                <van-icon :name="backicon" size="20"/>
            </template>
            <template #title>
                <span class="hometitle">银行卡</span>
            </template>
        </van-nav-bar>

        <div class="bank-list">
            <img class="defaultpage" src="../../assets/defaultpage/bankList.png" v-if="BankArrList.length==0" alt="">
            <!-- :style="{background:`url(../../assets/bankcard/cardbg1.png)`}" -->
            <div class="bank-card" v-for="(item,index) in BankArrList" :style="{'background-image': `url(${require('../../assets/bankcard/cardbg'+(parseInt(index)+1)+'.png')})`}">
                <span class="setDefault" v-if="item.is_check==0" @click="setDefault(item)">设为默认</span>
                <span class="isDefault" v-if="item.is_check==1">默 <span class="letterspacing"></span>认</span>
                <p class="card-name">储蓄卡</p>
                <p class="card-number">
                    <span class="card-point" />
                    <span class="card-point" />
                    <span class="card-point" />
                    <span class="card-point" />
                        <span class="letterspacing" />
                    <span class="card-point" />
                    <span class="card-point" />
                    <span class="card-point" />
                    <span class="card-point" />
                        <span class="letterspacing" />
                    <span class="card-point" />
                    <span class="card-point" />
                    <span class="card-point" />
                    <span class="card-point" />
                        <span class="letterspacing" />
                    {{item.bank_card.substring(item.bank_card.length-4)}}
                </p>
            </div>


            <!-- <div class="bank-card-default">
                <span class="isDefault">默 <span class="letterspacing"></span>认</span>
                <p class="card-name">储蓄卡</p>
                <p class="card-number">
                    <span class="card-point" />
                    <span class="card-point" />
                    <span class="card-point" />
                    <span class="card-point" />
                        <span class="letterspacing" />
                    <span class="card-point" />
                    <span class="card-point" />
                    <span class="card-point" />
                    <span class="card-point" />
                        <span class="letterspacing" />
                    <span class="card-point" />
                    <span class="card-point" />
                    <span class="card-point" />
                    <span class="card-point" />
                        <span class="letterspacing" />
                    8423
                </p>
            </div> -->

            <img src="../../assets/img/addbankcard.png" class="add" @click="add" alt="">
        </div>
    </div>
</template>
<script>
import {_getUserBankList,_setChecked} from '../../service/bank.js'

export default {
    data(){
        return{
            BankArrList:[],
            backicon:require('../../assets/img/backicon.png'),
            bg1:require('../../assets/bankcard/cardbg1.png')
        }   
    },
    mounted(){
        if(localStorage.getItem('user')==null||localStorage.getItem('user')==undefined){
            this.$router.push("/login")
            return
        }
        this.getData()
    },
    methods:{
        onClickLeft(){
            // this.$router.push("/indexs")
            let arg=localStorage.getItem("routerHistory")
            if(arg=="/bankapply"){
                this.$router.push("/bankapply")
            }else{
                this.$router.push("/procenter")
            }
        },
        add(){
            if(this.BankArrList.length>=3){
                this.$toast("您只能关联三张银行卡")
                return
            }
            this.$router.push("/addbank")
        },
        getData(){
            let _this=this            
            let uid=JSON.parse(localStorage.getItem('user')).user_id
            _getUserBankList({user_id:uid}).then(res=>{
                console.log(res)
                if(res.errcode==1){
                    _this.BankArrList=[]
                    _this.BankArrList=[].concat(...res.data)
                    console.log(_this.BankArrList)
                }
            })
        },
        setDefault(card){
            let _this=this
            let uid=JSON.parse(localStorage.getItem('user')).user_id 
            _this.$toast.loading({
                duration: 0, // 持续展示 toast
                forbidClick: true,
            })
            _setChecked({
                id:card.id,
                user_id:uid,
                is_check:1
            }).then(res=>{
                console.log(res)
                setTimeout(()=>{
                    _this.$toast.clear()
                    _this.$toast(res.message)
                    _this.getData()
                },1000)
            })
        }
    }
}
</script>
<style lang="less" scoped>
.BankList-Main{
    width: 100%;
    height: 100vh;
    overflow-y: auto;
    background-color: #f8f8f8;
    .hometitle{
        font-size: 18px;
        font-family: "PingFang SC","Microsoft YaHei";
        font-weight: bold;
        color: #000;
        line-height: 46px;
    }

    .bank-list{
        width: 100%;
        .defaultpage{
            width: 119px;
            position: absolute;
            top: 32%;
            left: 35%;
        }
        .bank-card{
            width: 320px;
            height: 100px;
            margin: 13px auto 0 auto;
            border-radius: 10px;
            box-shadow: 0 3px 5px rgba(0, 0, 0, .5);
            background-position: center !important;
            background-repeat: no-repeat !important;
            background-size: contain !important;

            .setDefault{
                display: inline-block;
                width: 60px;
                height: 20px;
                float: right;
                border-radius: 0 10px 0 10px;
                line-height: 20px;
                background-color: rgba(255, 255, 255, .3);
                font-family: "PingFang SC","Microsoft YaHei";
                font-weight: 1000;
                font-size: 10px;
                text-align: center;
                color: #333;
            }
            .isDefault{
                display: inline-block;
                width: 60px;
                height: 20px;
                float: right;
                border-radius: 0 10px 0 10px;
                line-height: 20px;
                background-color: #000;
                font-family: "PingFang SC","Microsoft YaHei";
                font-weight: 1000;
                font-size: 10px;
                text-align: center;
                color: #fff;
            }
            p{
                margin-bottom: 5px;
            }
            .card-name{
                font-family: "PingFang SC","Microsoft YaHei";
                font-weight: 1000;
                font-size: 13px;
                color: #fff;
                padding-top: 38px;
                padding-left: 22px;
            }
            .card-number{
                color: #fff;
                padding-left: 22px;
                .card-point{
                    display: inline-block;
                    height: 6px;
                    width: 6px;
                    background-color: #fff;
                    border-radius: 3px;
                    margin: 0 3px 0 0;
                }
            } 
        }


        .bank-card-default{
            width: 320px;
            height: 100px;
            margin: 13px auto 0 auto;
            border-radius: 10px;
            background-color: #ccc;
            box-shadow: 3px 3px 5px rgba(0, 0, 0, .5);

            .setDefault{
                display: inline-block;
                width: 60px;
                height: 20px;
                float: right;
                border-radius: 0 10px 0 10px;
                line-height: 20px;
                background-color: rgba(255, 255, 255, .3);
                font-family: "PingFang SC","Microsoft YaHei";
                font-weight: 1000;
                font-size: 10px;
                text-align: center;
                color: #333;
            }
            .isDefault{
                display: inline-block;
                width: 60px;
                height: 20px;
                float: right;
                border-radius: 0 10px 0 10px;
                line-height: 20px;
                background-color: #000;
                font-family: "PingFang SC","Microsoft YaHei";
                font-weight: 1000;
                font-size: 10px;
                text-align: center;
                color: #fff;
            }
            p{
                margin-bottom: 5px;
            }
            .card-name{
                font-family: "PingFang SC","Microsoft YaHei";
                font-weight: 1000;
                font-size: 13px;
                color: #575a5e;
                padding-top: 38px;
                padding-left: 22px;
            }
            .card-number{
                color:#575a5e;
                padding-left: 22px;
                .card-point{
                    display: inline-block;
                    height: 6px;
                    width: 6px;
                    background-color: #575a5e;
                    border-radius: 3px;
                    margin: 0 3px 0 0;
                }
            } 
        }


    }
    .add{
        width: 354px;
        position: absolute;
        bottom: 30px;
        left: 11px;
        right: 11px;
    }
}

.letterspacing{
    display: inline-block;
    width: 10px;
}
</style>